<template>
  <div>
    <div>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="count">
      <el-card
        class="el-card"
        shadow="hover"
        v-for="item in count"
        :key="item.name"
      >
        {{ item.name }}:{{ item.num }}
      </el-card>
    </div>
    <!-- <el-radio-group v-model="picType"> -->
    <!-- v-bind绑定bool类型解析  不绑定false字符串转为bool为true -->
    <!-- <el-radio-button :label="true">折线图</el-radio-button> -->
    <!-- <el-radio-button :label="false">柱状图</el-radio-button> -->
    <!-- </el-radio-group> -->
    <!-- v-if判断是否渲染  请求数据为异步  当数据内容长度不为0时再渲染 -->
    <!-- <el-switch
      v-model="picType"
      active-text="折线图"
      inactive-text="柱状图"
    ></el-switch> -->
    <!-- <Linep id="Lin1" class="Linep" :xdata="[1, 2]" :ydata="[100, 150]"></Linep>
    <Bar id="Lin2" class="Linep" :xdata="[1, 2]" :ydata="[100, 150]"></Bar> -->
    <el-switch
      style="display: block; text-align: right; margin-top: 10px"
      v-model="picType"
      active-color="#13ce66"
      inactive-color="#409eff"
      active-text="折线图"
      inactive-text="柱状图"
    >
    </el-switch>
    <!-- <div>
      <el-radio-group v-model="picType" style="display: block; text-align: right;margin-top:10px">
        <el-radio-button :label="true">折线图</el-radio-button>
        <el-radio-button :label="false">柱状图</el-radio-button>
      </el-radio-group>
    </div> -->
    <Linep
      :xdata="xdata"
      :ydata="ydata"
      id="sale"
      v-if="xdata.length > 0"
      v-show="picType"
    ></Linep>
    <Bar
      :xdata="xdata"
      :ydata="ydata"
      id="bar"
      v-if="xdata.length > 0"
      v-show="!picType"
    ></Bar>
    <Pie id="pie1" :data="pieData" v-if="pieData.length > 0" style="margin:50px auto"></Pie>
    <Map style="margin:0 auto"></Map>
  </div>
</template>

<script>
import url from '@/config/url'
import Linep from '@/components/Line.vue'
import Bar from '@/components/Bar.vue'
import Pie from '@/components/Pie.vue'
import Map from '@/components/Map.vue'
export default {
  components: {
    Linep,
    Bar,
    Pie,
    Map
  },
  data() {
    return {
      count: [],
      xdata: [],
      ydata: [],
      picType: false,
      pieData: []
    }
  },
  created() {
    this.loadData()
    this.getSaleCount()
    this.getSexCount()
  },
  methods: {
    //获取统计数据
    loadData() {
      this.$http.get(url.count).then((res) => {
        // console.log(res)
        this.count = res.data
      })
    },
    //获取七日数据
    getSaleCount() {
      this.$http.get(url.saleCount).then((res) => {
        // console.log(res)
        res.data.forEach((item) => {
          this.xdata.push(item.name)
          this.ydata.push(item.num)
        })
      })
    },
    //获取会员性别信息
    getSexCount() {
      this.$http.get(url.sexCount).then((res) => {
        // console.log(res)
        res.data.forEach((item) => {
          // console.log(item);
          this.pieData.push(item)
          // console.log(this.pieData);
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.count {
  background-color: #f5f5f5;
  margin-top: 20px;
  display: flex;
  padding: 10px;
  text-align: center;
  justify-content: space-between;
  > .el-card {
    width: 18%;
    background: linear-gradient(to right, #409eff, rgb(1, 210, 247));
    color: white;
  }
}
</style>